<template>
    <div class="tabBtn">
        <ul class="tabUl">
            <li v-for="(tabObj,index) in item" @click="tab(index)" :class="[{active:activeIndex === index},tabObj.liNums]">
                <div>
                    {{tabObj.cont}}
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
    export default {
        name:"tab",
        data(){
            return {
                activeIndex:0,
            }
        },
        props:['item'],
        methods: {
            tab(index) {
                this.activeIndex = index;
                this.$emit("changePane",index);
            }
        }
    }
</script>
<style lang="scss">
    .tabBtn {
        position: relative;
        color:#333;
        font-size: .3rem;
        background: #fff;
        overflow: hidden;
        li {
            text-align: center;
            height: .8rem;
            line-height: .8rem;
            float: left;
            display: inline-block;
            div{
                margin:auto;
            }
            &.active {
                div {
                    font-size: .35rem;
                    color: red;
                    border-bottom: 2px solid red;
                    display: inline-block;
                    padding: 0 .3rem;
                    height: .8rem;
                    font-weight: bold;
                }
            }
        }
        .liTwo {
            width: 50%;
        }
        .liThree {
            width: 33.33%;
        }
        .liFour {
            width: 25%;
        }
    }
</style>
